<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/token.js" type="module"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/index.js"></script>

</head>
<body>
<div id="app" v-cloak>
    <!--    <button @click="reportDialogVisible=true">举报</button>-->
    <el-container>
        <!--头部-->
        <el-header>
            <div id="logo">
                <svg t="1626448726551" class="icon" viewBox="0 0 1157 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="3198" width="64" height="64">
                    <path d="M799.209739 12.733217c184.498087 0 334.002087 145.808696 334.002087 325.765566 0 282.534957-395.842783 569.299478-523.931826 654.781217-24.754087 16.517565-56.097391 15.404522-83.611826-3.027478C392.993391 901.12 6.366609 617.73913 6.366609 338.498783 6.366609 158.541913 155.826087 12.733217 340.368696 12.733217a336.495304 336.495304 0 0 1 229.420521 89.488696 336.762435 336.762435 0 0 1 229.420522-89.488696z m-227.417043 260.58574l-3.962435 0.400695a22.216348 22.216348 0 0 0-18.16487 21.815652v437.114435a22.171826 22.171826 0 0 0 44.343652 0V295.535304a22.171826 22.171826 0 0 0-22.260869-22.216347z m-127.243131 81.474782a22.171826 22.171826 0 0 0-22.171826 22.216348v274.209391a22.171826 22.171826 0 0 0 44.343652 0v-274.253913a22.171826 22.171826 0 0 0-22.171826-22.171826z m253.862957 0a22.171826 22.171826 0 0 0-22.171826 22.216348v274.209391a22.171826 22.171826 0 0 0 44.343652 0v-274.253913a22.171826 22.171826 0 0 0-22.171826-22.171826z m126.486261 95.276522a22.171826 22.171826 0 0 0-22.171826 22.171826v83.656348a22.171826 22.171826 0 0 0 44.388173 0v-83.656348a22.171826 22.171826 0 0 0-22.216347-22.171826z m-506.924522 0a22.171826 22.171826 0 0 0-22.171826 22.171826v83.656348a22.171826 22.171826 0 0 0 44.343652 0v-83.656348a22.171826 22.171826 0 0 0-22.171826-22.171826z"
                          fill="#FFC79C" p-id="3199"></path>
                </svg>
                <svg t="1626448726551" class="icon" viewBox="0 0 1157 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="3198" width="64" height="64">
                    <path d="M799.209739 12.733217c184.498087 0 334.002087 145.808696 334.002087 325.765566 0 282.534957-395.842783 569.299478-523.931826 654.781217-24.754087 16.517565-56.097391 15.404522-83.611826-3.027478C392.993391 901.12 6.366609 617.73913 6.366609 338.498783 6.366609 158.541913 155.826087 12.733217 340.368696 12.733217a336.495304 336.495304 0 0 1 229.420521 89.488696 336.762435 336.762435 0 0 1 229.420522-89.488696z m-227.417043 260.58574l-3.962435 0.400695a22.216348 22.216348 0 0 0-18.16487 21.815652v437.114435a22.171826 22.171826 0 0 0 44.343652 0V295.535304a22.171826 22.171826 0 0 0-22.260869-22.216347z m-127.243131 81.474782a22.171826 22.171826 0 0 0-22.171826 22.216348v274.209391a22.171826 22.171826 0 0 0 44.343652 0v-274.253913a22.171826 22.171826 0 0 0-22.171826-22.171826z m253.862957 0a22.171826 22.171826 0 0 0-22.171826 22.216348v274.209391a22.171826 22.171826 0 0 0 44.343652 0v-274.253913a22.171826 22.171826 0 0 0-22.171826-22.171826z m126.486261 95.276522a22.171826 22.171826 0 0 0-22.171826 22.171826v83.656348a22.171826 22.171826 0 0 0 44.388173 0v-83.656348a22.171826 22.171826 0 0 0-22.216347-22.171826z m-506.924522 0a22.171826 22.171826 0 0 0-22.171826 22.171826v83.656348a22.171826 22.171826 0 0 0 44.343652 0v-83.656348a22.171826 22.171826 0 0 0-22.171826-22.171826z"
                          fill="#FFC79C" p-id="3199"></path>
                </svg>
            </div>
            <div id="index">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="首页" name="first"></el-tab-pane>
                </el-tabs>
            </div>
            <div id="search-head">
                <el-input placeholder="请输入内容" v-model="searchText" @keyup.enter.native="searchKeyWord">
                    <el-button slot="append" icon="el-icon-search" @click="searchKeyWord"></el-button>
                </el-input>
            </div>
            <div id="login" v-if="!userIsLogin">
                <el-link type="primary" href="login.html " target="_self">登录/注册</el-link>
            </div>
            <div id="imageName" v-else>
                <el-dropdown>
						<span class="el-dropdown-link">
                            <div class="imageName1"><el-tag type="warning"> {{userName}}</el-tag></div>
                             <div class="imageName2"><el-avatar :src="userAvatarUrl"></el-avatar></div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="openUserInfoCenter(); getUserInfoById(userId)"
                                              drawer=true"">个人主页
                            </el-dropdown-item>
                            <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
						</span>
                </el-dropdown>
            </div>
            <div class="published-article">
                <el-button type="primary" icon="el-icon-edit" circle
                           @click="handleOpen2(5)"></el-button>
            </div>

        </el-header>
        <!--主体-->
        <el-main>
            <el-row :gutter="20">
                <!--主体左边的侧边栏-->
                <el-col :span="3">
                    <div class="grid-content bg-purple">
                        <el-menu
                                default-active="1"
                                class="el-menu-vertical-demo"
                                @select="handleOpen2"
                                style="width: 150px">
                            <el-menu-item index="1">
                                <i class="el-icon-aim"></i>
                                <span slot="title">热门</span>
                            </el-menu-item>
                            <el-menu-item index="6" v-if="userIsLogin==true">
                                <i class="el-icon-star-off"></i>
                                <span slot="title">猜你喜欢</span>
                            </el-menu-item>
                            <el-submenu index="2">
                                <template slot="title">
                                    <i class="el-icon-magic-stick"></i>
                                    <span>精华</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="2-1">24小时内</el-menu-item>
                                    <el-menu-item index="2-2">7天内</el-menu-item>
                                    <el-menu-item index="2-3">30天内</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                            <el-menu-item index="3">
                                <i class="el-icon-menu"></i>
                                <span slot="title">最新</span>
                            </el-menu-item>
                            <el-menu-item index="4" v-if="userIsLogin==true">
                                <i class="el-icon-chat-dot-square"></i>
                                <span slot="title">审帖</span>
                            </el-menu-item>
                            <el-menu-item index="5">
                                <i class="el-icon-s-promotion"></i>
                                <span slot="title">发表</span>
                            </el-menu-item>
                        </el-menu>
                    </div>
                </el-col>
                <!--主体的中间部分-->
                <el-col :span="15">
                    <div class="grid-content bg-purple">

                        <!-- 走马灯栏图片 -->
                        <el-carousel :interval="4000" type="card" height="255px">
                            <el-carousel-item v-for="img in carousel_url" :key="img">
                                <el-image :src="img"></el-image>
                            </el-carousel-item>
                        </el-carousel>
                        <!--文章部分-->
                        <el-table
                                @row-click="tableRowClick"
                                :row-class-name="tableRowClassName"
                                v-loading="articleIsLoading"
                                :data="articleData"
                                width="800px"
                                :show-header="false">
                            <el-table-column
                                    width="907px">
                                <template slot-scope="scope">
                                    <el-row>
                                        <el-col :span="1">
                                            <div class="grid-content bg-purple"></div>
                                        </el-col>
                                        <el-col :span="22" style="cursor: pointer !important;"><span
                                                v-html="scope.row.articleContent"></span>
                                        </el-col>
                                        <el-col :span="1">
                                            <div class="grid-content bg-purple"></div>
                                        </el-col>
                                    </el-row>
                                    <!--文章标签、点赞、评论-->
                                    <el-row>
                                        <el-col :span="1">
                                            <div class="grid-content bg-purple"></div>
                                        </el-col>
                                        <el-col :span="22">
                                            <el-row :gutter="20">
                                                <el-col :span="15">
                                                    <div class="bg-purple">
                                                        <div class="article11-labels">
                                                            <span v-if="scope.row.articleLabels.length<=0">&nbsp;</span>
                                                            <el-tag v-for="label in scope.row.articleLabels"
                                                                    @click="getArticleByLabel(label)">{{label}}
                                                            </el-tag>
                                                        </div>
                                                    </div>
                                                </el-col>
                                                <el-col :span="1">
                                                    <div class="bg-purple">
                                                        <svg t="1626598250277" class="icon1" viewBox="0 0 1024 1024"
                                                             version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                             p-id="4616"
                                                             width="23" height="23"
                                                             @click.stop="articleUp(scope.row)"
                                                             v-if="scope.row.articleIsUp==false">
                                                            <path d="M884.875894 423.143253 646.970506 423.143253c92.185562-340.464205-63.516616-357.853247-63.516616-357.853247-65.993017 0-52.312436 52.182476-57.3031 60.881602 0 166.502152-176.849824 296.971645-176.849824 296.971645l0 472.171899c0 46.607504 63.516616 63.393819 88.433098 63.393819l357.452111 0c33.641191 0 61.036122-88.224344 61.036122-88.224344 88.434122-300.70569 88.434122-390.177444 88.434122-390.177444C944.657442 418.179195 884.875894 423.143253 884.875894 423.143253L884.875894 423.143253 884.875894 423.143253zM884.875894 423.143253"
                                                                  fill="#707070" p-id="4617"></path>
                                                            <path d="M251.671415 423.299819 109.214912 423.299819c-29.420053 0-29.873378 28.89612-29.873378 28.89612l29.420053 476.202703c0 30.309306 30.361495 30.309306 30.361495 30.309306L262.420223 958.707948c25.686009 0 25.458835-20.049638 25.458835-20.049638L287.879058 459.411271C287.879058 422.837284 251.671415 423.299819 251.671415 423.299819L251.671415 423.299819 251.671415 423.299819zM251.671415 423.299819"
                                                                  fill="#707070" p-id="4618"></path>
                                                        </svg>
                                                        <svg t="1626598250277" class="icon1" viewBox="0 0 1024 1024"
                                                             version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                             p-id="4616"
                                                             width="23" height="23" v-else
                                                             @click.stop="articleUp(scope.row)">
                                                            <path d="M884.875894 423.143253 646.970506 423.143253c92.185562-340.464205-63.516616-357.853247-63.516616-357.853247-65.993017 0-52.312436 52.182476-57.3031 60.881602 0 166.502152-176.849824 296.971645-176.849824 296.971645l0 472.171899c0 46.607504 63.516616 63.393819 88.433098 63.393819l357.452111 0c33.641191 0 61.036122-88.224344 61.036122-88.224344 88.434122-300.70569 88.434122-390.177444 88.434122-390.177444C944.657442 418.179195 884.875894 423.143253 884.875894 423.143253L884.875894 423.143253 884.875894 423.143253zM884.875894 423.143253"
                                                                  fill="#d81e06" p-id="4617"></path>
                                                            <path d="M251.671415 423.299819 109.214912 423.299819c-29.420053 0-29.873378 28.89612-29.873378 28.89612l29.420053 476.202703c0 30.309306 30.361495 30.309306 30.361495 30.309306L262.420223 958.707948c25.686009 0 25.458835-20.049638 25.458835-20.049638L287.879058 459.411271C287.879058 422.837284 251.671415 423.299819 251.671415 423.299819L251.671415 423.299819 251.671415 423.299819zM251.671415 423.299819"
                                                                  fill="#d81e06" p-id="4618"></path>
                                                        </svg>
                                                    </div>
                                                </el-col>
                                                <el-col :span="2">
                                                    <div class="bg-purple">
                                                        <span class="article11-up-count">{{scope.row.articleUpCount}}</span>
                                                    </div>
                                                </el-col>
                                                <el-col :span="1">
                                                    <div class="bg-purple">
                                                        <svg t="1626598020073" class="icon2" viewBox="0 0 1024 1024"
                                                             version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                             p-id="4280"
                                                             width="23" height="23"
                                                             v-if="scope.row.articleIsDown==false"
                                                             @click.stop="articleDown(scope.row)">
                                                            <path d="M139.124106 600.856747L377.029494 600.856747c-92.185562 340.464205 63.516616 357.853247 63.516616 357.853247 65.993017 0 52.312436-52.18247599 57.3031-60.881602 0-166.502152 176.849824-296.971645 176.849824-296.971645l-1e-8-472.171899c0-46.607504-63.516616-63.393819-88.43309799-63.393819l-357.452111 0c-33.641191 0-61.036122 88.224344-61.036122 88.224344-88.43412199 300.70569-88.434122 390.177444-88.43412199 390.177444C79.342558 605.820805 139.124106 600.856747 139.124106 600.856747L139.124106 600.856747 139.124106 600.856747zM139.124106 600.856747"
                                                                  fill="#707070" p-id="4281"></path>
                                                            <path d="M772.328585 600.700181L914.785088 600.700181c29.420053 0 29.873378-28.89612 29.873378-28.89612l-29.420053-476.202703c0-30.30930601-30.36149501-30.309306-30.36149499-30.309306L761.57977699 65.292052c-25.68600901 0-25.458835 20.049638-25.458835 20.049638L736.12094199 564.588729C736.120942 601.162716 772.328585 600.700181 772.328585 600.700181L772.328585 600.700181 772.328585 600.700181zM772.328585 600.700181"
                                                                  fill="#707070" p-id="4282"></path>
                                                        </svg>
                                                        <svg t="1626598020073" class="icon2" viewBox="0 0 1024 1024"
                                                             version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                             p-id="4280"
                                                             width="23" height="23" v-else
                                                             @click.stop="articleDown(scope.row)">
                                                            <path d="M139.124106 600.856747L377.029494 600.856747c-92.185562 340.464205 63.516616 357.853247 63.516616 357.853247 65.993017 0 52.312436-52.18247599 57.3031-60.881602 0-166.502152 176.849824-296.971645 176.849824-296.971645l-1e-8-472.171899c0-46.607504-63.516616-63.393819-88.43309799-63.393819l-357.452111 0c-33.641191 0-61.036122 88.224344-61.036122 88.224344-88.43412199 300.70569-88.434122 390.177444-88.43412199 390.177444C79.342558 605.820805 139.124106 600.856747 139.124106 600.856747L139.124106 600.856747 139.124106 600.856747zM139.124106 600.856747"
                                                                  fill="#d81e06" p-id="4281"></path>
                                                            <path d="M772.328585 600.700181L914.785088 600.700181c29.420053 0 29.873378-28.89612 29.873378-28.89612l-29.420053-476.202703c0-30.30930601-30.36149501-30.309306-30.36149499-30.309306L761.57977699 65.292052c-25.68600901 0-25.458835 20.049638-25.458835 20.049638L736.12094199 564.588729C736.120942 601.162716 772.328585 600.700181 772.328585 600.700181L772.328585 600.700181 772.328585 600.700181zM772.328585 600.700181"
                                                                  fill="#d81e06" p-id="4282"></path>
                                                        </svg>
                                                    </div>
                                                </el-col>
                                                <el-col :span="2">
                                                    <div class="bg-purple">
                                                        <span class="article11-down-count">{{scope.row.articleDownCount}}</span>
                                                    </div>
                                                </el-col>
                                                <el-col :span="3">
                                                    <div class="bg-purple">
                                                        <el-badge :value="scope.row.articleCommentCount" :max="99"
                                                                  class="item">
                                                            <el-button size="small"
                                                                       @click.stop="openOneArticleComment(scope.row)">
                                                                评论
                                                            </el-button>
                                                        </el-badge>
                                                    </div>
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                        <el-col :span="1">
                                            <div class="grid-content bg-purple"></div>
                                        </el-col>
                                    </el-row>

                                </template>


                            </el-table-column>
                        </el-table>

                        <!--分页-->
                        <div class="block" id="block" v-if="classify_index != 6">
                            <el-pagination
                                    background
                                    :pager-count="13"
                                    @current-change="handleCurrentChange"
                                    :current-page.sync="index_curPage"
                                    :page-size="20"
                                    layout="total,prev, pager, next, jumper"
                                    :total="index_article_total"
                                    :hide-on-single-page="true">
                            </el-pagination>
                        </div>
                        <div class="block" id="reflashMabBeLike" v-if="classify_index == 6">
                            <el-button type="primary" @click="getUserMayBeLikeAndsmoothscroll">不喜欢？换一批！！</el-button>
                        </div>
                    </div>
                </el-col>
                <!--右边侧边栏-->
                <el-col :span="6" align="center">
                    <div class="grid-content bg-purple">
                        <!--右边天气接口-->
                        <iframe allowtransparency="true" frameborder="0" width="290" height="96" scrolling="no"
                                src="//tianqi.2345.com/plugin/widget/index.htm?s=2&z=3&t=0&v=0&d=2&bd=0&k=000000&f=004080&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=71961&w=290&h=96&align=center">
                        </iframe>
                        <!--扫码支付-->
                        <el-button type="info" round @click="refreshCode(1);isShowTooltip= !isShowTooltip"
                                   style=" margin-bottom:10px;">赞赏<span v-model="money">{{money}}</span>元买个鸡腿（支付宝）
                        </el-button>
                        <div class="block" v-if="isShowTooltip">
                            <el-slider v-model="money" :format-tooltip="formatTooltip" style="width: 250px"
                                       :min="1" :max="100" @change="moneyChange"></el-slider>
                        </div>
                        <div id="qrcode" v-if="isShowTooltip" v-loading="qrCodeIsLoading"></div>


                        <!-- 广告栏位 -->
                        <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px"
                             data-ad-client="ca-pub-6439172921969342" data-ad-slot="8847854552"
                             data-adsbygoogle-status="done"
                             data-ad-status="filled">
                            <ins id="aswift_0_expand"
                                 style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent;"
                                 tabindex="0" title="Advertisement" aria-label="Advertisement">
                                <ins id="aswift_0_anchor"
                                     style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px;background-color:transparent;">
                                    <iframe
                                            id="aswift_0" name="aswift_0"
                                            style="left:0;position:absolute;top:0;border:0;width:300px;height:250px;"
                                            sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation"
                                            width="300" height="250" frameborder="0"
                                            src="https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-6439172921969342&amp;output=html&amp;h=250&amp;slotname=8847854552&amp;adk=3591493624&amp;adf=3424699291&amp;pi=t.ma~as.8847854552&amp;w=300&amp;lmt=1624191346&amp;psa=1&amp;format=300x250&amp;url=http%3A%2F%2Fwww.6our.com%2Fbest&amp;flash=0&amp;wgl=1&amp;dt=1624191345984&amp;bpp=5&amp;bdt=920&amp;idt=404&amp;shv=r20210616&amp;cbv=%2Fr20110914&amp;ptt=9&amp;saldr=aa&amp;abxe=1&amp;cookie=ID%3Daabfe0a0875e2016-22a7cf6b25c900ae%3AT%3D1622549465%3ART%3D1622549465%3AS%3DALNI_MaJ7Af2B2SAMhiF4LrrYI4ZNLLSrA&amp;correlator=2006399708537&amp;frm=20&amp;pv=2&amp;ga_vid=959182760.1624191346&amp;ga_sid=1624191346&amp;ga_hid=1581414332&amp;ga_fc=0&amp;u_tz=480&amp;u_his=2&amp;u_java=0&amp;u_h=864&amp;u_w=1536&amp;u_ah=824&amp;u_aw=1536&amp;u_cd=24&amp;u_nplug=3&amp;u_nmime=4&amp;adx=930&amp;ady=465&amp;biw=1519&amp;bih=220&amp;scr_x=0&amp;scr_y=0&amp;eid=31060615%2C31060930%2C31060975&amp;oid=3&amp;pvsid=1374586873817294&amp;pem=903&amp;eae=0&amp;fc=640&amp;brdim=0%2C0%2C0%2C0%2C1536%2C0%2C1536%2C824%2C1536%2C220&amp;vis=1&amp;rsz=%7C%7CeEbr%7C&amp;abl=CS&amp;pfx=0&amp;fu=0&amp;bc=23&amp;ifi=1&amp;uci=a!1&amp;btvi=1&amp;fsb=1&amp;xpc=OoqcSFXdaQ&amp;p=http%3A//www.6our.com&amp;dtd=424"
                                            marginwidth="0" marginheight="0" vspace="0" hspace="0"
                                            allowtransparency="true"
                                            scrolling="no" allowfullscreen="true" data-google-container-id="a!1"
                                            data-google-query-id="CITaxJqYpvECFZyE6QUd2ZEFjQ"
                                            data-load-complete="true"></iframe>
                                </ins>
                            </ins>
                        </ins>

                    </div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
    <!--文章发布弹窗-->
    <div id="published">
        <el-drawer
                custom-class="published"
                size="99%"
                title="发布秘密"
                :visible.sync="published"
                :destroy-on-close="true"
                direction="btt"
                :before-close="handleClose">


            <div id="articleContent">
                <span>内容：</span>
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 10, maxRows: 100}"
                        placeholder="请输入内容"
                        v-model="articleContent">
                </el-input>
            </div>
            <div id="articleLabels">
                <span>标签：</span>
                <el-input
                        v-model="articleLabels"
                        placeholder="最多3个标签，以空格隔开，可以不填"
                        clearable>
                </el-input>
            </div>
            <div id="varCode">
                <span>验证码：</span>
                <el-input
                        v-model.trim="valCode"
                        clearable
                        @keyup.enter.native="publishedArticle">
                </el-input>
                <img src="/treeHole/varifyCode.action?t=1111" alt="验证码加载失败" id="varifyCode">
                <el-link type="primary" @click="refreshVarCode">验证失败？重新加载验证码</el-link>
            </div>
            <div id="fabu">
                <el-button type="primary" round @click="publishedArticle">发布秘密</el-button>
            </div>

            <div id="waring">
                <h3>投稿须知</h3>
                <p>请不要包发表与秘密无关的内容。</p>
                <p>秘密经过审核后发布。</p>
                <p>请勿发布广告或留下自己联系方式。</p>
                <p>请至少填写10个字以上。</p>
            </div>
        </el-drawer>
    </div>
    <!--文章审核弹窗-->
    <div id="audit">
        <el-drawer
                :show-close="false"
                :destroy-on-close="true"
                custom-class="audit"
                size="95%"
                :visible.sync="audit"
                direction="ttb">

            <el-container>
                <el-header>
                    <div id="audit_header">
                        <h3>审核须知:</h3>
                        不要通过与秘密无关的内容。
                        勿发布广告或留下自己联系方式。
                        至少填写10个字以上。
                        有政治风险。
                        低俗、色情、恶心
                        虚构或炫耀（脑残级）
                    </div>
                </el-header>
                <el-main><span v-html="auditArticle.articleContent"></span></el-main>
                <el-footer>
                    <div id="audit-foot">
                        <el-button type="success" round @click="passAndNotPassAuditArticle('pass')">可以寄存</el-button>
                        <el-button type="danger" round @click="passAndNotPassAuditArticle('notPass')">不能发表</el-button>
                        <el-button type="warning" round @click="getAuditArticle">说不清楚</el-button>
                    </div>
                </el-footer>
            </el-container>
        </el-drawer>
    </div>
    <!--用户信息弹窗-->
    <div id="userInfoCenter">
        <el-drawer
                @close="closeUserInfoCenter"
                :title="userName+'的个人中心'"
                :visible.sync="personalCenter"
                :with-header="true"
                size="75%">
            <el-row :gutter="20" class="user_center">
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <el-menu
                                default-active="1"
                                class="el-menu-vertical-demo"
                                @select="handleOpen">
                            <el-menu-item index="1">
                                <template slot="title">
                                    <i class="el-icon-user"></i>
                                    <span>个人信息</span>
                                </template>
                            </el-menu-item>
                            <el-menu-item index="2">
                                <i class="el-icon-document"></i>
                                <span slot="title">个人秘密管理</span>
                            </el-menu-item>
                            <el-menu-item index="3">
                                <i class="el-icon-chat-dot-square"></i>
                                <span slot="title">评论管理</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <i class="el-icon-chat-dot-square"></i>
                                <span slot="title">录入人脸</span>
                            </el-menu-item>
                        </el-menu>

                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="grid-content bg-purple">
                        <!--用户的基本信息页面-->
                        <div v-if="userIndex==1">
                            <el-card>

                                <el-row :gutter="20" class="user_center">

                                    <el-col :span="5">
                                        <div class="grid-content bg-purple">
                                            <el-upload class="avatar-uploader" :action="upload_url"
                                                       :show-file-list="false"
                                                       :on-success="handleAvatarSuccess"
                                                       :before-upload="beforeAvatarUpload" :headers="myHeaders">
                                                <img v-if="userAvatarUrl"
                                                     :src="userAvatarUrl"
                                                     class="avatar"/>
                                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                            </el-upload>
                                        </div>
                                    </el-col>
                                    <el-col :span="19">
                                        <div class="grid-content bg-purple">
                                            <h2>{{userName}}</h2>
                                        </div>
                                    </el-col>
                                </el-row>

                            </el-card>

                            <el-card class="base_info_box mg-top-10" style="margin-top: 10px">
                                <div>
                                    <div class="base_info">
                                        <el-row>
                                            <el-col>
                                                <span>基本信息</span>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <ul :class="{ display: isEdit }" @click="edit()">
                                        <li>
                                            <div class="key">
                                                <span>用</span>
                                                <span>户</span>
                                                <span>ID</span>
                                            </div>
                                            <div class="value">
                                                <span>{{ userInfoById.userId }}</span>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="key">
                                                <span>用</span>
                                                <span>户</span>
                                                <span>昵</span>
                                                <span>称</span>
                                            </div>
                                            <div class="value">
                                                <span>{{ userInfoById.userName }}</span>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="key">
                                                <span>用</span>
                                                <span>户</span>
                                                <span>邮</span>
                                                <span>箱</span>
                                            </div>
                                            <div class="value">
                                                <span>{{ userInfoById.userEmail }}</span>
                                            </div>
                                        </li>

                                        <li>
                                            <div class="key">
                                                <span>性</span>
                                                <span>别</span>
                                            </div>
                                            <div class="value">
                                                <svg t="1626361047429" class="icon" viewBox="0 0 1024 1024"
                                                     version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                     p-id="3519" width="20" height="20"
                                                     v-if="userInfoById.userSex == 0">
                                                    <path d="M641.536 221.696c0-68.608-55.808-124.416-124.416-124.416S392.192 153.088 392.192 221.696s55.808 124.416 124.416 124.416 124.928-55.808 124.928-124.416z"
                                                          fill="#363f4d" p-id="3520"></path>
                                                    <path d="M452.096 356.352c-90.624 28.672-149.504 116.224-149.504 210.944v150.528c0 7.168 6.144 13.312 13.312 13.312h72.192v181.76c0 6.144 5.12 11.264 11.264 11.264h235.008c6.144 0 11.264-5.12 11.264-11.264v-181.76H701.44c16.384 0 29.696-13.312 29.696-29.696v-146.944c0.512-136.192-140.288-242.176-279.04-198.144z"
                                                          fill="#363f4d" p-id="3521"></path>
                                                </svg>
                                                <svg t="1626360988008" class="icon" viewBox="0 0 1024 1024"
                                                     version="1.1" xmlns="http://www.w3.org/2000/svg"
                                                     p-id="3212" width="20" height="20"
                                                     v-if="userInfoById.userSex == 1"
                                                >
                                                    <path d="M647.68 263.168c0-68.608-55.808-124.416-124.416-124.416S398.848 194.56 398.848 263.168s55.808 124.416 124.416 124.416 124.416-55.808 124.416-124.416zM721.92 751.616l-62.976-247.296c-13.824-67.584-74.24-116.224-143.36-116.224s-130.048 48.64-143.36 113.664l-63.488 249.856c-3.072 12.288-0.512 25.088 7.168 35.328s19.456 15.872 32.256 16.384c0 0 30.72 0.512 55.296 1.024 7.68 23.552 19.456 58.368 30.208 91.648 5.12 16.896 20.992 28.16 38.912 28.16H558.08c17.408 0 33.28-11.264 38.4-28.16 10.752-33.792 22.528-69.12 30.208-92.672 24.576 0 55.296-0.512 55.296-0.512 12.8-0.512 24.576-6.144 32.256-15.872 7.68-10.24 10.752-23.04 7.68-35.328z"
                                                          fill="#363f4d" p-id="3213"></path>
                                                </svg>

                                            </div>
                                        </li>
                                        <li>
                                            <div class="key">
                                                <span>个</span>
                                                <span>人</span>
                                                <span>简</span>
                                                <span>介</span>
                                            </div>
                                            <div class="value">
                                                <span>{{ userInfoById.userIntroduce }}</span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="edit_box" :class="{ display: !isEdit }">
                                    <el-form ref="userInforRef" :model="userInfoById" label-width="0px">
                                        <div class="from_item_box">
                                            <el-form-item>
                                                <div class="from_item">
                                                    <div>
                                                        <label>用户ID</label>
                                                        <el-input :disabled="true"
                                                                  v-model="userInfoById.userId"></el-input>
                                                    </div>
                                                    <div>
                                                        <label>用户昵称</label>
                                                        <el-input
                                                                v-model="userInfoById.userName"></el-input>
                                                    </div>
                                                    <div>
                                                        <label>用户邮箱</label>
                                                        <el-input
                                                                v-model="userInfoById.userEmail"></el-input>
                                                    </div>
                                                </div>
                                            </el-form-item>
                                            <el-form-item>
                                                <div class="from_item">
                                                    <div>
                                                        <label>性别</label>
                                                        <el-radio-group class="sex"
                                                                        v-model="userInfoById.userSex"
                                                                        size="medium">
                                                            <el-radio border label="0">男</el-radio>
                                                            <el-radio border label="1">女</el-radio>
                                                        </el-radio-group>
                                                    </div>
                                                </div>
                                            </el-form-item>
                                            <el-form-item>
                                                <div>
                                                    <div class="person_in">
                                                        <label>个人简介</label>
                                                        <el-input type="textarea"
                                                                  v-model="userInfoById.userIntroduce"></el-input>
                                                    </div>
                                                </div>
                                            </el-form-item>
                                            <el-form-item>
                                                <div class="from_item">
                                                    <div class="from_btn_box">
                                                        <el-button round @click="edit()">取消</el-button>
                                                        <el-button type="danger" round
                                                                   @click="sendEditInfo()">
                                                            保存
                                                        </el-button>
                                                    </div>
                                                </div>
                                            </el-form-item>
                                        </div>
                                    </el-form>
                                </div>
                            </el-card>

                            <el-card class="base_info_box mg-top-10">
                                <div>

                                    <div class="base_info">
                                        <el-row>
                                            <el-col>
                                                <span>修改密码</span>
                                            </el-col>
                                        </el-row>
                                    </div>
                                    <div>
                                        <el-form ref="userPawInforRef" :model="userPawInforform"
                                                 :rules="changePawFormRules"
                                                 label-width="0px">

                                            <el-form-item>
                                                <div class="from_item">
                                                    <div>
                                                        <el-form-item prop="oldPaw">
                                                            <label>旧密码</label>
                                                            <el-input type="password"
                                                                      v-model="userPawInforform.oldPaw"
                                                                      prefix-icon="el-icon-key"
                                                                      placeholder="请输入旧密码！">
                                                            </el-input>
                                                        </el-form-item>
                                                    </div>
                                                    <div class="inputPwd">
                                                        <el-form-item prop="newPaw">
                                                            <label>新密码</label>
                                                            <el-input type="password"
                                                                      v-model="userPawInforform.newPaw"
                                                                      prefix-icon="el-icon-key"
                                                                      placeholder="请输入新密码！">
                                                            </el-input>
                                                        </el-form-item>
                                                    </div>
                                                </div>
                                            </el-form-item>
                                            <el-form-item>
                                                <div class="from_item">
                                                    <div class="from_btn_box mg-top-10">

                                                        <el-button type="danger" round @click="changePaw()"
                                                                   :disabled="!isOldPaw">保存修改
                                                        </el-button>
                                                    </div>
                                                </div>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                        <!--用户的文章管理-->
                        <div v-if="userIndex==2">
                            <div id="user-articles">
                                <el-tabs type="border-card" @tab-click="toggleTheCommentTAB1">
                                    <el-tab-pane>
                                        <span slot="label"><i class="el-icon-light-rain"></i> 审核通过</span>
                                        <div id="user-article-pass">
                                            <el-table
                                                    :data="ownerArticlesPass"
                                                    style="width: 100%">
                                                <el-table-column type="expand">
                                                    <template slot-scope="props">
                                                        <el-form label-position="left" inline class="demo-table-expand">
                                                            <el-form-item label="秘密 ID">
                                                                <span>{{ props.row.articleId }}</span>
                                                            </el-form-item>
                                                            <el-form-item label="发布时间">
                                                                <span>{{ props.row.articleDate }}</span>
                                                            </el-form-item>
                                                            <el-form-item label="秘密标签">
                                                                <span>{{ props.row.articleLabel }}</span>
                                                            </el-form-item>
                                                            <el-form-item label="点赞数量">
                                                                <span>{{ props.row.articleUpCount }}</span>
                                                            </el-form-item>
                                                            <el-form-item label="踩赞数量">
                                                                <span>{{ props.row.articleDownCount}}</span>
                                                            </el-form-item>
                                                            <el-form-item label="评论数量">
                                                                <span>{{ props.row.articleCommentCount}}</span>
                                                            </el-form-item>
                                                            <el-form-item label="秘密详情">
                                                                <span v-html=" props.row.articleContent"> </span>
                                                            </el-form-item>
                                                        </el-form>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column width=180 align="center"
                                                                 label="发布时间"
                                                                 prop="articleDate">
                                                </el-table-column>
                                                <el-table-column
                                                        align="center"
                                                        label="简单描述"
                                                        prop="simpleComtent">
                                                </el-table-column>
                                                <el-table-column
                                                        align="center"
                                                        width=70
                                                        label="点赞数"
                                                        prop="articleUpCount">
                                                </el-table-column>
                                                <el-table-column
                                                        align="center"
                                                        width=70
                                                        label="踩赞数"
                                                        prop="articleDownCount">
                                                </el-table-column>
                                                <el-table-column
                                                        align="center"
                                                        width=70
                                                        label="评论数"
                                                        prop="articleCommentCount">
                                                </el-table-column>
                                                <el-table-column label="操作" width="80px" align="center">
                                                    <template slot-scope="scope">
                                                        <el-popover :ref='scope.row.articleId' placement="top"
                                                                    width="160">
                                                            <p> 确定删除此秘密吗？</p>
                                                            <div style="text-align: right; margin: 0">
                                                                <el-button size="mini" type="text"
                                                                           @click="$refs[scope.row.articleId].doClose()">
                                                                    取消
                                                                </el-button>
                                                                <el-button type="danger" size="mini"
                                                                           @click="handleDelete3(scope.$index, scope.row)">
                                                                    确定
                                                                </el-button>
                                                            </div>
                                                            <el-button slot="reference" type="danger" size="mini">删除
                                                            </el-button>
                                                        </el-popover>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                            <div class="block" id="block1">
                                                <el-pagination @current-change="handleCurrentChange1"
                                                               :current-page.sync="ownerArticlesCurPage"
                                                               :hide-on-single-page="true"
                                                               :page-size="20" layout="total, prev, pager, next, jumper"
                                                               :total="ownerArticlesTotal">
                                                </el-pagination>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane>
                                        <span slot="label"><i class="el-icon-heavy-rain"></i>待审核</span>
                                        <div id="user-article-notPass">
                                            <el-table
                                                    :data="ownerArticlesNotPass"
                                                    style="width: 100%">
                                                <el-table-column type="expand">
                                                    <template slot-scope="props">
                                                        <el-form label-position="left" inline class="demo-table-expand">
                                                            <el-form-item label="秘密 ID">
                                                                <span>{{ props.row.articleId }}</span>
                                                            </el-form-item>
                                                            <el-form-item label="发布时间">
                                                                <span>{{ props.row.articleDate }}</span>
                                                            </el-form-item>
                                                            <el-form-item label="秘密详情">
                                                                <span v-html=" props.row.articleContent"> </span>
                                                            </el-form-item>
                                                        </el-form>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column width=180 align="center"
                                                                 label="发布时间"
                                                                 prop="articleDate">
                                                </el-table-column>
                                                <el-table-column
                                                        align="center"
                                                        label="简单描述"
                                                        prop="simpleComtent">
                                                </el-table-column>
                                                <el-table-column label="操作" width="80px" align="center">
                                                    <template slot-scope="scope">
                                                        <el-popover :ref='scope.row.articleId' placement="top"
                                                                    width="160">
                                                            <p> 确定删除此秘密吗？</p>
                                                            <div style="text-align: right; margin: 0">
                                                                <el-button size="mini" type="text"
                                                                           @click="$refs[scope.row.articleId].doClose()">
                                                                    取消
                                                                </el-button>
                                                                <el-button type="danger" size="mini"
                                                                           @click="handleDelete4(scope.$index, scope.row)">
                                                                    确定
                                                                </el-button>
                                                            </div>
                                                            <el-button slot="reference" type="danger" size="mini">删除
                                                            </el-button>
                                                        </el-popover>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                            <div class="block" id="block4">
                                                <el-pagination @current-change="handleCurrentChange2"
                                                               :current-page.sync="ownerArticlesCurPage"
                                                               :hide-on-single-page="true"
                                                               :page-size="20" layout="total, prev, pager, next, jumper"
                                                               :total="ownerArticlesTotal">
                                                </el-pagination>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                </el-tabs>

                            </div>
                        </div>
                        <!--用户的评论管理-->
                        <div v-if="userIndex==3">

                            <div id="user-comments">
                                <el-tabs type="border-card" @tab-click="toggleTheCommentTAB">
                                    <el-tab-pane>
                                        <span slot="label"><i class="el-icon-light-rain"></i>自己秘密下全部的评论</span>
                                        <div id="user-comments-allComments">
                                            <el-table
                                                    :data="ownerArticleComments"
                                                    style="width: 100%">
                                                <el-table-column type="expand">
                                                    <template slot-scope="props">
                                                        <el-form label-position="left" inline class="demo-table-expand">
                                                            <el-form-item label="评论 ID">
                                                                <span>{{ props.row.commentId }}</span>
                                                            </el-form-item>
                                                            <el-form-item label="评论时间">
                                                                <span>{{ props.row.commentDate }}</span>
                                                            </el-form-item>
                                                            <el-form-item label="评论用户">
                                                                <span>{{ props.row.userName }}</span>
                                                            </el-form-item>
                                                            <el-form-item label="评论用户 ID">
                                                                <span>{{ props.row.userId }}</span>
                                                            </el-form-item>
                                                            <el-form-item label="评论文章 ID">
                                                                <span>{{ props.row.articleId }}</span>
                                                            </el-form-item>
                                                            <el-form-item label="评论间隔">
                                                                <span>{{ props.row.overdueTime}}</span>
                                                            </el-form-item>
                                                            <el-form-item label="评论详情">
                                                                <span>{{ props.row.commentContent }}</span>
                                                            </el-form-item>
                                                        </el-form>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column width=180 align="center"
                                                                 label="评论时间"
                                                                 prop="commentDate">
                                                </el-table-column>
                                                <el-table-column
                                                        align="center"
                                                        width=180
                                                        label="评论用户"
                                                        prop="userName">
                                                </el-table-column>
                                                <el-table-column
                                                        align="center"
                                                        label="简单描述"
                                                        prop="simpleComtent">
                                                </el-table-column>
                                                <el-table-column label="操作" width="80px" align="center">
                                                    <template slot-scope="scope">
                                                        <el-popover :ref='scope.row.commentId' placement="top"
                                                                    width="160">
                                                            <p> 确定删除此评论及其子评论吗？</p>
                                                            <div style="text-align: right; margin: 0">
                                                                <el-button size="mini" type="text"
                                                                           @click="$refs[scope.row.commentId].doClose()">
                                                                    取消
                                                                </el-button>
                                                                <el-button type="danger" size="mini"
                                                                           @click="handleDelete1(scope.$index, scope.row)">
                                                                    确定
                                                                </el-button>
                                                            </div>
                                                            <el-button slot="reference" type="danger" size="mini">删除
                                                            </el-button>
                                                        </el-popover>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                            <div class="block" id="block2">
                                                <el-pagination @current-change="handleCurrentChange3"
                                                               :current-page.sync="ownerCommentCurPage"
                                                               :hide-on-single-page="true"
                                                               :page-size="20" layout="total, prev, pager, next, jumper"
                                                               :total="ownerArticleCommentsTotal">
                                                </el-pagination>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                    <el-tab-pane>
                                        <span slot="label"><i class="el-icon-heavy-rain"></i>仅自己的评论</span>
                                        <div id="user-comments-owner">
                                            <el-table
                                                    :data="ownerComments"
                                                    style="width: 100%">
                                                <el-table-column type="expand">
                                                    <template slot-scope="props">
                                                        <el-form label-position="left" inline class="demo-table-expand">
                                                            <el-form-item label="评论 ID">
                                                                <span>{{ props.row.commentId }}</span>
                                                            </el-form-item>
                                                            <el-form-item label="评论时间">
                                                                <span>{{ props.row.commentDate }}</span>
                                                            </el-form-item>
                                                            <el-form-item label="评论用户">
                                                                <span>{{ props.row.userName }}</span>
                                                            </el-form-item>
                                                            <el-form-item label="评论用户 ID">
                                                                <span>{{ props.row.userId }}</span>
                                                            </el-form-item>
                                                            <el-form-item label="评论文章 ID">
                                                                <span>{{ props.row.articleId }}</span>
                                                            </el-form-item>
                                                            <el-form-item label="评论间隔">
                                                                <span>{{ props.row.overdueTime}}</span>
                                                            </el-form-item>
                                                            <el-form-item label="评论详情">
                                                                <span>{{ props.row.commentContent }}</span>
                                                            </el-form-item>
                                                        </el-form>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column width=180 align="center"
                                                                 label="评论时间"
                                                                 prop="commentDate">
                                                </el-table-column>
                                                <el-table-column
                                                        align="center"
                                                        width=180
                                                        label="评论用户"
                                                        prop="userName">
                                                </el-table-column>
                                                <el-table-column
                                                        align="center"
                                                        label="简单描述"
                                                        prop="simpleComtent">
                                                </el-table-column>
                                                <el-table-column label="操作" width="80px" align="center">
                                                    <template slot-scope="scope">
                                                        <el-popover :ref='scope.row.commentId' placement="top"
                                                                    width="160">
                                                            <p> 确定删除此评论及其子评论吗？</p>
                                                            <div style="text-align: right; margin: 0">
                                                                <el-button size="mini" type="text"
                                                                           @click="$refs[scope.row.commentId].doClose()">
                                                                    取消
                                                                </el-button>
                                                                <el-button type="danger" size="mini"
                                                                           @click="handleDelete2(scope.$index, scope.row)">
                                                                    确定
                                                                </el-button>
                                                            </div>
                                                            <el-button slot="reference" type="danger" size="mini">删除
                                                            </el-button>
                                                        </el-popover>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                            <div class="block" id="block3">
                                                <el-pagination @current-change="handleCurrentChange4"
                                                               :current-page.sync="ownerCommentCurPage"
                                                               :hide-on-single-page="true"
                                                               :page-size="20" layout="total, prev, pager, next, jumper"
                                                               :total="ownerCommentsTotal">
                                                </el-pagination>
                                            </div>
                                        </div>
                                    </el-tab-pane>
                                </el-tabs>

                            </div>
                        </div>
                        <!--用户人脸录入或者更新-->
                        <div v-if="userIndex==4">
                            <div class="camera_outer" v-show="isOwnFace==false">
                                <div>
                                    <video id="video" ref="video" autoplay width="400" height="300"></video>
                                    <canvas id="canvas" ref="canvas" width="400" height="300"></canvas>

                                </div>
                                <div id="uploadImage">
                                    <el-button type="primary" round @click="uploadImg">确定</el-button>
                                </div>
                            </div>
                            <div v-if="isOwnFace==true&&openFail==false">
                                <el-button type="primary" round @click="callCamera">您已经成功录入过了，重新录入？</el-button>
                            </div>
                            <div v-if="openFail==true">
                                <el-button type="primary" round @click="callCamera">打开摄像头失败，重新打开？</el-button>
                            </div>
                        </div>

                    </div>
                </el-col>
            </el-row>

        </el-drawer>
    </div>
    <!--单篇文章评论窗口-->
    <div id="oneArticleComment">
        <el-drawer
                custom-class="oneArticleComment"
                size="95%"
                direction="ttb"
                :destroy-on-close="true"
                :visible.sync="oneArticleComment"
                :with-header="false">
            <el-container>
                <el-aside width="300px">
                    <div id="oneArticleTime">
                        <span v-html="oneArticle.articleDate"></span>
                    </div>
                    <div id="oneArticleContent">
                        <span v-html="oneArticle.articleContent"></span>
                    </div>
                </el-aside>
                <el-container>
                    <el-main>
                        <div id="comment-head" style="text-align: center;margin-bottom: 10px">
                            <span>评论</span>
                        </div>
                        <div id="comment-main">
                            <div v-if="articleComments.length <= 0">
                                <span>暂无评论</span>
                            </div>
                            <div v-else>
                                <div class="tree">
                                    <el-tree
                                            :highlight-current="true"
                                            :indent="35"
                                            :data="articleComments"
                                            node-key="commentId"
                                            :props="commentProps"
                                            :default-expand-all="true"
                                            :expand-on-click-node="false">
                                        <div class="custom-tree-node" slot-scope="{ node, data }">
                                            <div class="observe-top">
                                                <img :src="data.userToken.userProfilePhoto"
                                                     alt="头像"
                                                     class="observe-header-img">
                                                <span class="observe-nickname">{{data.userToken.userName}}</span>
                                                <span class="observe-user"
                                                      v-text="data.parentCommentId==''?' : ':'回复-'+node.parent.data.userToken.userName+' : '"></span>
                                                <span class="observe-content">{{data.commentContent}}</span>
                                                <span class="observe-date">{{data.overdueTime}}</span>
                                                <el-tag class="observe-tag"
                                                        @click="openReply(node,data)"
                                                        round size="mini">
                                                    回复
                                                </el-tag>
                                            </div>

                                        </div>
                                    </el-tree>
                                </div>

                            </div>
                        </div>

                    </el-main>
                    <el-footer height="90px">
                        <div id="comment-footer">
                            <el-input
                                    placeholder="请文明发言"
                                    v-model="commentInput"
                                    clearable
                                    width="300px"
                                    @keyup.enter.native="addArticleComment"
                            >
                                <el-button slot="append" icon="el-icon-s-promotion"
                                           @click="addArticleComment"></el-button>
                            </el-input>
                        </div>
                    </el-footer>
                </el-container>
            </el-container>
            <div id="replyDrawer">
                <!--评论回复弹窗-->
                <el-drawer
                        :append-to-body="true"
                        :with-header="false"
                        size="5.45%"
                        :modal="false"
                        custom-class="replyDrawer"
                        :destroy-on-close="true"
                        :visible.sync="replyDrawer"
                        direction="btt"
                        :show-close="false">
                    <div id="comment-reply">
                        <el-input
                                :placeholder="`回复`+parentUserName +` : `"
                                v-model="replyInput"
                                clearable
                                @keyup.enter.native="reply"
                        >
                            <el-button slot="append" icon="el-icon-s-promotion"
                                       @click="reply"></el-button>
                        </el-input>
                    </div>
                </el-drawer>
            </div>
        </el-drawer>
    </div>

    <div id="report">
        <!-- 举报对话框 -->
        <el-dialog title="举报" :visible.sync="reportDialogVisible" width="450px" :modal-append-to-body="false">
            <div>
                选择举报原因(必选)
            </div>
            <div class="insert_tag_box">

                <div v-for="(item,index) in allReportLabelsList" :key='item.reportId'>
                    <el-tag @click='insertLabelclick(item.reportId)' effect="plain"
                            :type="chooice === item.reportId?'danger':'info'">{{item.reportLabel}}
                    </el-tag>

                </div>
            </div>

            <div class="insert_second_tag_box">

                <div v-show="chooice==index+1" v-for="(item,index) in childReportLabelsList" :key='item.reportId'>
                    <div v-show="item.length!==0">
                        选择具体原因(必选)
                    </div>

                    <el-tag @click='insertSecondLabelclick(item.reportId)' effect="plain" v-for="(item,index) in item"
                            :key='item.reportId' :type="secondChooice === item.reportId?'danger':'info'">
                        {{item.reportLabel}}
                    </el-tag>
                </div>

            </div>
            <div>
                <label>补充说明(选填)</label>
                <el-input type="textarea" v-model="insertReason"></el-input>
            </div>

            <span slot="footer" class="dialog-footer">
              <el-button @click="reportDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="sendInsertInfo()">确 定</el-button>
            </span>
        </el-dialog>
    </div>

    <div>
        <el-backtop></el-backtop>
    </div>

</div>


</body>
<!--引入jquery，jquery.qrcode 用于生成二维码的js-->
<script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script src="js/index.js" type="module"></script>
</html>